<div id="breadcrumb">
    <a onclick="javascript:history.go(-1);" class="go-to-home tip-bottom font font18" style="cursor: pointer;">
        <i class="icon-arrow-left"></i> 返回 &nbsp;
    </a>
    <a onclick="javascript:history.go(-1);" class="font font18" style="cursor: pointer;"> &nbsp;&nbsp;<span>代理 &gt</span></a>
    <a onclick="javascript:history.go(-1);" class="font font18" style="cursor: pointer;"> <span>家族&gt</span></a>
    <a href="/agent/familyinfo?id={{info['id']}}" class="current font font18"> <span>家族详情</span></a>
    <input type="hidden" id="familyId" value="{{info['id']}}">
</div>

<!--sidebar-menu-->
<div id="sidebar" class="clearfix">
    <div class="user-info">
        <img alt="" src="{{info['logo']}}">

        <p>
            <span class="font font20 cr-dpe">{{info['name']}}</span>
        </p>
    </div>
    <div class="progtrckr-box">
        <div class="progtrckrline" style="height: 132px;"></div>
        <ul class="progtrckr">
            <li ><i class="custom-icon custom-icon-point"></i><a href="/agent/familyinfo?id={{info['id']}}">基本资料</a></li>
            <li><i class="custom-icon custom-icon-point"></i><a href="/agent/familyanchor?id={{info['id']}}">旗下主播</a></li>
            <li class="active"><i class="custom-icon custom-icon-point"></i><a href="/agent/familyincome?id={{info['id']}}">收益</a></li>
            <!-- <li><i class="custom-icon custom-icon-point"></i><a href="/agent/familytrend?id={{info['id']}}">趋势分析</a></li> -->
        </ul>
    </div>
</div>
<!--end sidebar-menu-->


<div id="content">

<div class="container-fluid">

	<div class="content-box" style="background: #FFF; text-align: left; margin-top:20px;  padding-bottom: 40px;">
		<ul class="tab-nav clearfix">
			<!--<li class="tabs-nav active"><a href="#box1">个人收益</a></li>-->
			<!--<li class="tabs-nav"><a href="#box2">底薪/分成</a></li>-->
            <li class="tabs-nav active"><a href="#box1">家族收益</a></li>
            <li class="tabs-nav"><a href="#box3">贡献排行</a></li>
			<!-- <li class="tabs-nav"><a href="#box2">结算记录</a></li> -->


		</ul>
		<div class="hr-d7" ></div>

        <div id="box1" class="tab-box" style="display: block">
            <div class="row-fluid" style="margin-top: 60px; min-width: 900px; padding: 0 25px;">

                <div class="thum-box box span4" style="float: left">
                    <div class="thum-top clearfix">
                        <div class="title">
                            <p><span>总收益</span></p>
                            <p><span>(聊币)</span></p>
                        </div>
                    </div>

                    <div class="thum-content ">
                        <p class="font font20 cr-e5">
                            <span class="font font36 cr-ly">{{familyInfo['income']}}</span>
                        </p>
                    </div>

                </div>

                <div class="thum-box box span4" style="float: left">
                    <div style="margin: 0 auto; width: 280px;">
                        <div class="thum-top ggr clearfix">
                            <div class="title ggr">
                                <p><span>可结算</span></p>
                                <p><span>(聊币)</span></p>
                            </div>
                        </div>

                        <div class="thum-content ">
                            <p class="font font20 cr-e5 clearfix">
                                <span class="font font36 cr-ly pull-left" style="margin-left:15px; ">{{familyInfo['money']}}</span>
                                {% if familyInfo['money']>0 %}
                                <span class="pull-right" style="margin-right: 10px;"><button class="btn" onclick="sellted()">结算</button></span>
                                {% else %}
                                <span class="pull-right" style="margin-right: 10px;"><button class="btn-grey" >结算</button></span>
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>


                <div class="thum-box box span4" style="float: left">
                    <div class="pull-right">
                        <div class="thum-top bl clearfix">
                            <div class="title bl">
                                <p style="font-size: 16px;"><span>不可结算</span></p>
                                <p><span>(聊币)</span></p>
                            </div>
                        </div>

                        <div class="thum-content " style="height: 52px">
                            <p class="font font20 cr-e5 clearfix">
                                <span class="font font36 cr-ly">{{familyInfo['notSettle']}}</span>
                            </p>
                        </div>
                    </div>
                </div>

            </div>

            <div  style="border: 1px solid #ddd;font-size: 16px;height: 60px;margin:20px 20px;">
                <div style="margin: 10px 20px;">
                    <span class="font font36">结算日：</span><span class="font font36 cr-ly">每月{{settlement['settlementDate']}}日</span>
                    <button type="button" class="btn btn-purple pull-right" onclick="btntime()">修改</button>
                </div>

            </div>

            <div class="row-fluid" style="margin-top: 30px;">
                <div class="container-fluid">
                    <div class="nav-line">
                        <a class="active" data-type="day" onclick="TabNavline(this,'day','天')">按日</a>
                        <a data-type="month" onclick="TabNavline(this,'week','周')">按周</a>
                        <a data-type="year" onclick="TabNavline(this,'month','月')">按月</a>

                        <a class="date-calendar"><i class=" icon-calendar"></i> <input id="mydate"  placeholder="请输入日期"  value=""></a>
                    </div>
                </div>
            </div>

            <div class="row-fluid" style="margin-top: 20px;">
                <div class="container-fluid">
                    <div id="render-chart" style="height: 500px">

                    </div>
                </div>

            </div>
        </div>

        <div id="box2" class="tab-box" style="display: none;margin: 30px 25px 10px 25px;">

            {% include "common/pagination.html" %}

            <table id="tableList" class="table with-check table-purple">
                <thead>
                <tr>
                    <th>时间</th>
                    <th>结算金额（聊币）</th>
                    <th>申请人</th>
                    <th>结算人</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <div id="box3" class="tab-box" style="display: none;margin: 30px 25px 10px 25px;">

            <div class="row-fluid" style="margin-top: 30px;">

                    <div class="nav-line">
                        <a class="active" data-type="day" onclick="contributionRank('thisDay')">今日</a>
                        <a  data-type="day" onclick="contributionRank('yesterday')">昨日</a>
                        <a data-type="month" onclick="contributionRank('thisWeek')">本周</a>
                        <a data-type="month" onclick="contributionRank('lastWeek')">上周</a>
                        <a data-type="year" onclick="contributionRank('thisMonth')">本月</a>
                        <a data-type="year" onclick="contributionRank('lastMonth')">上月</a>
                        <a class="date-calendar"><i class=" icon-calendar"></i> <input id="gmydate"  placeholder="请输入日期"  value=""></a>
                    </div>

            </div>

            <table id="table3List" class="table with-check table-purple">
                <thead>
                <tr>
                    <th>排名</th>
                    <!-- <th>头像</th> -->
                    <th>uid</th>
                    <th>昵称</th>
                    <!-- <th>收益（聊币）</th> -->
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="row-fluid">
                <div class="total pull-left">
                    <p class="font font18 cr-gy">
                        <span>记录总数：</span>
                        <span id="count">0</span>
                    </p>
                </div>

                <div id="pagination1" class="pagination alternate pull-right"></div>
            </div>
        </div>


	</div>
</div>

</div>

<div id="settled" style="display:none;font-size: 16px;color: #9ea3a0;">
    <form id="pDialogForm2">
        <div style="margin-top: 30px;text-align: center;"><span>确定要结算该家族的收益吗？</span></div>

    </form>
</div>

<div id="btntime" style="display:none;font-size: 16px;color: #9ea3a0;">
    <form id="pDialogForm3">
        <div style="margin-top:20px;text-align: left;"><span>请选择结算日：</span></div>
        <div>
            <ul id="numlist" data="{{settlement['settlementDate']}}">
                {% for i in 0..27 %}
                <li id="k{{ i+1 }}" class="timenum"  onclick="getnum(this,'{{ i+1 }}')">{{ i+1 }}</li>
                {% endfor %}
            </ul>
        </div>

    </form>
</div>


<link rel="stylesheet" href="{{static_url('web/css/ui.daterangepicker.css')}}">
<script src="{{static_url('web/js/flotr2.js')}}"></script>
<script src="{{static_url('web/js/daterangepicker.jQuery.js')}}"></script>
<script src="{{static_url('web/laydate/laydate.js')}}"></script>
<script type="text/javascript" src="{{static_url('web/js/jquery.range.js')}}"></script>
<link rel="stylesheet" href="{{static_url('web/css/jquery.range.css')}}">
<script src="{{static_url('web/js/jquery.ui.datepicker-zh-CN.js')}}"></script>
<script type="text/javascript">

$(function(){
	$('body').addClass('anchorinfo');

    getAnchorSettle();
    TabNavline('','day','天');
    $('.tabs-nav').click(function(){
        $('.tabs-nav.active').removeClass('active');
        $(this).addClass('active');
        var id=$(this).children('a').attr('href');
        $('.tab-box').hide();
        $(id).show();
        return false;
    });

    $('.nav-line a').click(function(){
        $('.nav-line a.active').removeClass('active');
        $(this).addClass('active');
        return false;
    });

    $('#mydate').daterangepicker({
                presetRanges:[
                    //{text:'最近一周', dateStart:'yesterday-7days', dateEnd:'yesterday' },
                    //{text:'最近一月', dateStart:'yesterday-1month', dateEnd:'yesterday' },
                    //{text:'最近一年', dateStart:'yesterday-1year', dateEnd:'yesterday' }
                ],
                presets:{
                    dateRange:'自定义时间'
                },
                rangeStartTitle:'起始日期',
                rangeEndTitle:'结束日期',
                nextLinkText:'下月',
                prevLinkText:'上月',
                doneButtonText:'确定',
                cancelButtonText:'取消',
                earliestDate:'',
                latestDate:Date.parse('today'),
                constrainDates:true,
                rangeSplitter:'-',
                dateFormat:'yy-mm-dd',
                closeOnSelect:false,
                onOpen:function(){
                    $('.ui-daterangepicker-dateRange').click().parent().hide();
                },
                onClose:function(){
                    var typer=$('#mydate').attr('data');
                    if(typer=='day'){
                        TabNavline('',typer,'天');
                        return false;
                    }
                    if(typer=='week'){
                        TabNavline('',typer,'周');
                        return false;
                    }
                    else{
                        TabNavline('',typer,'月');
                        return false;

                    }
                }
            }
    );
    $('#gmydate').daterangepicker({
                presetRanges:[
                    //{text:'最近一周', dateStart:'yesterday-7days', dateEnd:'yesterday' },
                    //{text:'最近一月', dateStart:'yesterday-1month', dateEnd:'yesterday' },
                    //{text:'最近一年', dateStart:'yesterday-1year', dateEnd:'yesterday' }
                ],
                presets:{
                    dateRange:'自定义时间'
                },
                rangeStartTitle:'起始日期',
                rangeEndTitle:'结束日期',
                nextLinkText:'下月',
                prevLinkText:'上月',
                doneButtonText:'确定',
                cancelButtonText:'取消',
                earliestDate:'',
                latestDate:Date.parse('today'),
                constrainDates:true,
                rangeSplitter:'-',
                dateFormat:'yy-mm-dd',
                closeOnSelect:false,
                onOpen:function(){
                    $('.ui-daterangepicker-dateRange').click().parent().hide();
                    $('.ui-daterangepickercontain').css({left:($('#gmydate').offset().left-300)+'px'});
                    $('.ui-daterangepickercontain').css({top:($('#gmydate').offset().top+20)+'px'});
                },
                onClose:function(){
                    var typer=$('#gmydate').attr('data');
                    contributionRank('thisDay');

                }
            }
    );

});

function TabNavline(a,typer,title){

    $('#mydate').attr('data',typer);
    var b=$('#mydate').val();
    var timeBegin= b.substring(0,10);
    var timeEnd= b.substring(12,23);
    var familyid=$('#familyId').val();
    var data={};
    data.type=typer;
    data.familyId=familyid;
    data.timeBegin=timeBegin;
    data.timeEnd=timeEnd;
    $.ajax({
        type: "POST",
        data: data,
        url: '/ajax/familyComeList',
        dataType: 'json',
        success: function (res) {
            justDraw(res.data, {yTitle:title});
        }
    })

}

function sellted(){

    $('#settled').dialog({
        autoOpen:true,
        width:420,
        height:250,
        title:'结算确认',
        resizable:false,
        modal:true,
        open:function(){
        },
        buttons: {
            "确定": function () {
                var familyid=$('#familyId').val();
                var data={};
                data.isFamilys=1;
                data.ids=familyid;

                $.ajax({
                    type: "POST",
                    data: data,
                    url: '/ajax/setSettle',
                    dataType: 'json',
                    success: function (res) {
                        alert(res.info);
                        location.reload();
                    }
                })

            }//,
            /*"取消": function () {


             }*/
        }
    });
}

function getAnchorSettle(index){
    var data={};
    data.uid=$('#familyId').val();
    data.type=2;
    data.page=index||1;
    data.pageSize=global.pageSize;
    $.ajax({
        type: "post",
        data: data,
        url: '/ajax/getAnchorSettle',
        dataType: 'json',
        success: function (res) {
            var data=res.data;
            var tableList=document.getElementById("tableList");
            var tbody= tableList.getElementsByTagName('tbody')[0];
            dataTable.clearData(tbody);

            var count=document.getElementById('count');
            count.innerHTML=data.count;

            for(var i=0;i<data.list.length;i++){
                addRow(tbody,'',data.list[i]);
            }

            if(!index||index==0){
                utilsPagination("#pagination1",data.count,global.pagesize,function(page_index,jq){
                    page_index+=1;
                    getAnchorSettle(page_index);
                });
            }

        }
    });
}

function addRow(table,index,data){
    var row=table.insertRow();
    var cell=row.insertCell(0);
    var cell1=row.insertCell(1);
    var cell2=row.insertCell(2);
    var cell3=row.insertCell(3);
    var cell4=row.insertCell(4);

    cell.innerHTML=data.createTime;
    cell1.innerHTML=data.cash;
    cell2.innerHTML=data.applyUser;
    cell3.innerHTML=data.auditUser;
    cell4.innerHTML=data.status=='0'?'待结算':data.status==1?'已结算':'';

    return row;
}

function contributionRank(typer,index){

    $('#gmydate').attr('data',typer);
    var b=$('#gmydate').val();
    var timeBegin= b.substring(0,10);
    var timeEnd= b.substring(12,23);
    var familyid=$('#familyId').val();
    var data={};
    data.type=typer;
    data.familyId=familyid;
    data.startTime=timeBegin;
    data.stopTime=timeEnd;
    data.page=index||1;
    data.pageSize=global.pageSize;
    $.ajax({
        type: "POST",
        data: data,
        url: '/ajax/familyContributionv',
        dataType: 'json',
        success: function (res) {
            var data=res.data;
            var tableList=document.getElementById("table3List");
            var tbody= tableList.getElementsByTagName('tbody')[0];
            dataTable.clearData(tbody);

            var count=document.getElementById('count');
            count.innerHTML=data.count;

            for(var i=0;i<data.list.length;i++){
                rankaddRow(tbody,data.list[i]);
            }
            if(!index||index==0){
                utilsPagination("#pagination",data.count,global.pageSize,function(page_index,jq){
                    page_index+=1;
                    contributionRank(typer,page_index);
                });
            }
        }
    })

}

function rankaddRow(table,data){
    var row=table.insertRow();
    var cell=row.insertCell(0);
    var cell1=row.insertCell(1);
    var cell2=row.insertCell(2);
    // var cell3=row.insertCell(3);
    // var cell4=row.insertCell(4);

    cell.innerHTML=data.number;

    /*var div=document.createElement("div"),
            img=document.createElement("img")

    div.className="anchor-info";
    img.src=global.contract+data.avatar;

    div.appendChild(img);


    cell1.appendChild(div);*/

    cell1.innerHTML=data.uid;
    cell2.innerHTML=data.nickName;
    // cell4.innerHTML=data.income;
//                    data.status=='0'?'待结算':data.status==1?'已结算':'';
    return row;
}

function btntime(){

    var d=$('#numlist').attr('data');
    $('.timenum').removeClass('active');
    $('#k'+d).addClass('active');

    $('#btntime').dialog({
        autoOpen:true,
        width:420,
        height:350,
        title:'修改结算日',
        resizable:false,
        modal:true,
        open:function(){
        },
        buttons: {
            "确定": function () {
                var familyid=$('#familyId').val();
                var day=$('#numlist').attr('data');
                var data={};
                data.id=familyid;
                data.day=day;

                $.ajax({
                    type: "POST",
                    data: data,
                    url: '/ajax/selltedday',
                    dataType: 'json',
                    success: function (res) {
//                        alert(res.info);
                        location.reload();
                    }
                })

            }//,
            /*"取消": function () {


             }*/
        }
    });
}

function getnum(e,num){
    $('.timenum').removeClass('active');
    $(e).addClass('active');
    $('#numlist').attr('data',num);
}
	
</script>

